<template>
	<view class="" style="font-size: 24rpx;color: #808695;font-weight: 300;margin-left: 20rpx;">
		<view class="status-circle-icon" :style="{ background: setTagStateStyle(status).color }" style="display: inline-block; margin-bottom: 2px;"></view>
		<span>{{ setTagStateStyle(status).name }}</span>
	</view>
</template>
<script>

    export default {
        name: 'OpenState',
        props: {
            status: {
                type: [String, Number],
                default: ''
            },
            size: {
                type: String,
                default: 'mini'
            },
            type: {
                type: String,
                default: 'primary'
            }
        },
        data() {
            return {
                openStateList: [
                  { id: 0, name: '待下达', color: '#808695' },
                  { id: 1, name: '待翻改', color: '#ff9900' },
                  { id: 2, name: '已翻改', color: '#2b85e4' },
                  { id: 3, name: '已开台', color: '#19be6b' },
                  { id: 4, name: '已了机', color: '#ed4014' }
                ],
                isActive: false
            };
        },
        methods: {
            setTagStateStyle(status) {
                return this.openStateList.find(x => x.id === status);
            }
        }
    };
</script>
<style scoped lang="scss">
.status-circle-icon {
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    margin-right: 8rpx;
}
</style>
